<template>
	<view class="scan-container">
		<!-- 自定义导航栏 -->
		<custom-navbar title="扫码核销"></custom-navbar>
		
		<!-- 扫码区域 -->
		<view class="scan-area">
			<view class="scan-box" @click="startScan">
         <!-- 使用扫码 (2).png 作为扫描框 -->
         <image src="/static/扫码 (2).png" mode="aspectFit" class="scan-frame-img"></image>
         
         <!-- 二维码示例 -->
         <view class="qr-code-example">
           <image src="/static/二维码.png" mode="aspectFit" class="qr-code-img"></image>
			</view>
		</view>
		
       <!-- 提示文字 -->
       
		</view>
	</view>
</template>

<script>
export default {
	components: {
		'custom-navbar': () => import('@/components/custom-navbar.vue')
	},
	data() {
		return {
      isScanning: false
		}
	},
	methods: {
		// 开始扫描
		startScan() {
			// 直接跳转到结果页面进行测试
			this.handleScanResult('MC1234-5678-9012')
		},
		
		// 处理扫描结果
		handleScanResult(code) {
			// 跳转到核销结果页面
			uni.navigateTo({
				url: `/pages/verification/result?code=${code}&type=scan`
			})
		}
	}
}
</script>


<style lang="scss" scoped>
.scan-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 120rpx;
	padding-top: calc(env(safe-area-inset-top) + 88rpx);
	position: relative;
	
	&::before {
		content: '';
		position: absolute;
		top: calc(env(safe-area-inset-top) + 88rpx);
		left: 0;
		right: 0;
		height: 600px;
		background-image: linear-gradient(
			to bottom,
			#2f81fa 0%, #2f81fa 33.33%,
			#f7f7f7 33.33%, #f7f7f7 100% 
		);
		background-repeat: no-repeat;
		z-index: 0;
	}
}

.scan-area {
	display: flex;
	flex-direction: column;
	align-items: center;
  justify-content: center;
  height: calc(100vh - calc(env(safe-area-inset-top) + 188rpx) + 1500rpx);
  position: relative;
  z-index: 1;
  background-color: white;
  margin-top: -1000rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  border-radius: 0 0 20rpx 20rpx;
  
  &::before {
    content: '';
    position: absolute;
    top: -20rpx;
    left: -20rpx;
    width: 40rpx;
    height: 40rpx;
    background-color: #f5f5f5;
    border-radius: 50%;
    z-index: 2;
  }
  
  &::after {
    content: '';
    position: absolute;
    top: -20rpx;
    right: -20rpx;
    width: 40rpx;
    height: 40rpx;
    background-color: #f5f5f5;
    border-radius: 50%;
    z-index: 2;
  }
}
	
	.scan-box {
		position: relative;
		width: 400rpx;
		height: 400rpx;
   background: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .scan-frame-img {
   width: 230rpx;
   height: 230rpx;
   position: relative;
   z-index: 2;
 }

.qr-code-example {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
  width: 180rpx;
  height: 180rpx;
  z-index: 1;

  .qr-code-img {
    width: 100%;
    height: 100%;
		}
	}
	
	.scan-tip {
		font-size: 28rpx;
				color: #999999;
	margin-top: 60rpx;
  text-align: center;
  line-height: 1.5;
}

</style>